<template>
  <div class="tkbox address_box clmcenter" @click.self="closeAddr">
    <div class="tk_container clmstart">
      <div class="title">收货地址</div>
      <div class="tk_infobox">
        <div class="tk_info clmcenter">
          <form>
            <div class="fitem">
              <img src="@/assets/img/icon-uname.png" />
              <input
                type="text"
                v-model="addrinfo.name"
                placeholder="请输入您的姓名"
              />
            </div>
            <div class="fitem">
              <img src="@/assets/img/icon-mobile.png" />
              <input
                type="tel"
                maxlength="11"
                v-model="addrinfo.tel"
                placeholder="请输入您的手机号码"
              />
            </div>
            <div class="fitem">
              <img src="@/assets/img/icon-addr.png" />
              <input
                type="text"
                v-model="addrinfo.address"
                placeholder="请输入您的收货地址"
              />
            </div>
          </form>
        </div>
      </div>
    </div>
    <img src="@/assets/img/cfm.png" class="btn_submit" @click="submitAddr" />
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      addrinfo: {
        name: "",
        tel: "",
        address: "",
      },
    };
  },
  props: {
    from: {
      type: String,
      default: "",
    },
    addrInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    goods_id: {
      type: String,
      default: "",
    },
    number: {
      type: Number,
      default: 1,
    },
    payType: {
      type: String,
      default: "",
    },
    viscosity: {
      type: String,
      default: "",
    },
    // 修改地址时
    orderid: {
      type: String,
      default: "",
    },
  },
  mounted() {
    // console.log(this.addrInfo);
    if (this.addrInfo.name) {
      this.addrinfo = {
        name: this.addrInfo.name,
        tel: this.addrInfo.phone,
        address: this.addrInfo.address,
      };
    }
  },
  watch: {
    addrInfo: {
      handler(newVal) {
        this.addrinfo = {
          name: newVal.name,
          tel: newVal.phone,
          address: newVal.address,
        };
      },
      deep: true,
    },
  },
  methods: {
    // 提交收货地址
    submitAddr() {
      // console.log(this.from);
      // console.log(this.goods_id, this.number, this.payType);
      let myreg = /^1[3-9][0-9]{9}$/;
      if (
        this.addrinfo.name == "" ||
        this.addrinfo.tel == "" ||
        this.addrinfo.address == ""
      ) {
        return Toast("请将收货信息填写完整！");
      }
      // 验证手机号
      if (!myreg.test(this.addrinfo.tel)) {
        return Toast("请输入有效的手机号码！");
      }
      // 提交
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      if (this.from === "add") {
        // 新增
        let params = {
          receiver: this.addrinfo.name,
          phone: this.addrinfo.tel,
          address: this.addrinfo.address,
          goods_id: this.goods_id,
          number: this.number,
          type: this.payType,
          viscosity: this.viscosity,
        };
        this.$http.post("/saveReceiverInfoToMall", params).then((dat) => {
          Toast.clear();
          if (dat.data.code == 200) {
            // 提交成功
            this.$emit(
              "submitCall",
              dat.data.data.out_trade_no,
              dat.data.data.noncestr
            );
          } else {
            Toast(dat.data.msg);
          }
        });
      } else {
        // 修改
        let params = {
          order_id: this.orderid,
          receiver: this.addrinfo.name,
          phone: this.addrinfo.tel,
          address: this.addrinfo.address,
        };
        this.$http.post("/updateReceiverInfoToMall", params).then((dat) => {
          Toast.clear();
          if (dat.data.code == 200) {
            // 提交成功
            Toast("收货地址修改成功！");
            this.$emit("submitCall");
          } else {
            Toast(dat.data.msg);
          }
        });
      }
    },
    // 点击空白处关闭弹窗
    closeAddr() {
      this.$emit("closeAddr");
    },
  },
};
</script>
<style lang="less" scoped>
// 收货地址
.address_box {
  .tk_container {
    .tk_infobox {
      .tk_info {
        form {
          .fitem {
            width: 580px;
            height: 90px;
            border: 3px solid #7f7f7f;
            box-sizing: border-box;
            border-radius: 1rem;
            overflow: hidden;
            display: flex;
            margin: 1.5rem 0;
            img {
              width: 74px;
            }
            input {
              width: calc(100% - 74px);
              height: 100%;
              background: none;
              border-style: none;
              font-size: 2rem;
              color: #000000;
            }
          }
        }
      }
    }
  }
  .btn_submit {
    margin-top: 4rem;
  }
}
</style>
